<template>
  <a-modal
    :visible="visible"
    :cancelButtonProps="{ style: { display: 'none' } }"
    :afterClose="hanldeAfterClose"
    :dialogStyle="{ top: '120px' }"
    okText="关闭"
    width="90%"
    @cancel="close"
    @ok="close"
    :title="title"
    class="card-wrapper"
    wrapClassName="houseList-wrapper"
  >
    <global-search
      ref="search"
      :list="searchList"
      :loading="searchLoading"
      @search="handleSearch($event, false)"
      @reset="handleSearch($event, true)"
    >
    </global-search>
    <a-card :bordered="false">
      <a-row>
        <a-col :span="6">
          <div v-for="state in stateList" :key="state.value" class="m-b-16 fz-16">
            <a-icon type="home" theme="filled" class="fz-24" :style="{ color: state.color }" />
            <span class="m-l-16" style="vertical-align: text-bottom">{{ state.label }}</span>
          </div>
        </a-col>
        <a-col :span="18">
          <a-spin :spinning="spinning">
            <a-empty v-if="$isEmpty(houseList)" />
            <div v-else class="floor-house">
              <div class="floor" v-for="(floor, index) in houseList" :key="index">
                <h2 :id="`floor-${floor.Floor}`" class="text-left">
                  {{ floor.Floor > 0 ? '第' : '地下' }} {{ floor.Floor }} 层
                </h2>
                <div class="house-list m-b-16">
                  <a-row :gutter="[16, 16]" type="flex">
                    <a-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24" v-for="house in floor.list" :key="house.ID">
                      <div
                        class="house"
                        :style="{
                          'background-color': backgroundColor(house.Mode),
                        }"
                      >
                        <template v-if="type === 'floor'">
                          <div class="text-center" @click="handleHouseClick(house)">
                            {{ floor.Floor }}-{{ house.Number }}
                          </div>
                        </template>
                        <template v-else>
                          <a-descriptions :column="1">
                            <a-descriptions-item :label="keys.label" v-for="keys in houseParams" :key="keys.key">
                              {{ keys.custom ? keys.custom(house, floor.Floor) : house[keys.key] }}
                            </a-descriptions-item>
                          </a-descriptions>
                          <div class="action a-flex a-row-right">
                            <template v-for="(action, actionIndex) in actions">
                              <a-tooltip v-if="handleShowIcon(action, house)" :key="actionIndex">
                                <template slot="title"> {{ action.tooltip }} </template>
                                <a-icon
                                  class="m-l-6"
                                  :type="action.icon"
                                  :theme="action.theme || 'outlined'"
                                  :style="{ color: '#fff' }"
                                  @click="action.onClick(house)"
                                />
                              </a-tooltip>
                            </template>
                          </div>
                        </template>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </div>
              <div class="text-right" v-if="type !== 'floor'">
                <a-pagination
                  v-if="total > params.pageSize"
                  show-quick-jumper
                  v-model="params.pageIndex"
                  :page-size.sync="params.pageSize"
                  :total="total"
                  show-size-changer
                  :pageSizeOptions="['30', '50', '70']"
                  @showSizeChange="onShowSizeChange"
                  @change="handlepageChange"
                />
              </div>
            </div>
          </a-spin>
        </a-col>
      </a-row>
    </a-card>
    <a-back-top :target="target" ref="backTop" />
  </a-modal>
</template>

<script>
import GlobalSearch from '../GlobalSearch/index.vue'
import clonedeep from 'lodash.clonedeep'
import { getHouseTypeColor } from '@/api/common'
/**
 * Parser 房屋公用列表组件
 * @Author Answer™
 * @Version 1.0.0
 * @Date：2022-9-1 17:16:12
 * @LastEditors：Answer™
 * @LastEditTime：2022-10-10 15:04:00
 * @property visible  Boolean 显示、隐藏
 * @property title String 标题
 * @property searchList Array 搜索框配置
 * @property loadData Promise 数据加载方法
 * @property houseParams Array 显示的数据详情
 * {
 *   label: '', 显示label
 *   key:'', 数据字段
 *   custom: (house, floor) => { } 自定义数据
 * }
 * @property immediate Boolean 是否立即加载数据
 * @property actions Array 操作数组
 *  {
 *    tooltip: '', 提示显示
 *    icon: '', antdv icon
 *    theme: '', antdv icon
 *    onClick: (house) => { } 自定义点击事件
 *  }
 * @event HoueTypeColor  返回颜色Options数组
 * {
 *    ID: '',
 *    value: '',
 *    label: '',
 *    color:''
 * }
 */

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '查看房源',
    },
    type: {
      type: String,
      default: 'house',
    },
    searchList: {
      type: Array,
      default: () => [],
    },
    loadData: {
      type: Function,
      required: true,
    },
    houseParams: {
      type: Array,
      default: () => [],
    },
    actions: {
      type: Array,
      default: () => [],
    },
    immediate: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    GlobalSearch,
  },
  data() {
    return {
      stateList: [],
      params: {
        pageSize: 30,
        pageIndex: 1,
      },
      strContent: {},
      total: 0,
      spinning: false,
      searchLoading: false,
      houseList: [],
      // 还原搜索初始状态
      searchListClone: [],
      $searchForm: null,
    }
  },
  watch: {
    visible(n) {
      if (n) {
        this.searchListClone = clonedeep(this.searchList)
        if (this.immediate) {
          this.refresh()
        }
      }
      if (!this.$isEmpty(this.searchList)) {
        this.$nextTick(() => {
          this.$searchForm = this.$refs.search.form
        })
      }
    },
  },
  mounted() {
    this.searchListClone = clonedeep(this.searchList)
    this.getHouseType()
  },
  methods: {
    target() {
      return document.querySelector('.houseList-wrapper')
    },
    getHouseType() {
      this.searchLoading = true
      getHouseTypeColor({
        PmKey: 'HoueTypeColor',
      })
        .then((res) => {
          this.stateList = res.map((e) => {
            return {
              ID: e.ID,
              value: e.PMNAME,
              label: `${e.PMNAME}${e.PMBREAK ? `(${e.PMBREAK})` : ''}`,
              color: e.PMCOLOR,
            }
          })
          this.$emit('HoueTypeColor', this.stateList)
        })
        .finally(() => {
          this.searchLoading = false
        })
    },
    handleShowIcon(action, house) {
      if (action.hasOwnProperty('show') && typeof action.show === 'function') {
        return action.show(house)
      }
      return true
    },
    backgroundColor(mode) {
      const item = this.stateList.find((e) => e.value === mode)
      if (item) {
        return item.color
      } else {
        return '#fff'
      }
    },
    onShowSizeChange(current, pageSize) {
      this.params.pageIndex = current
      this.params.pageSize = pageSize
      this.fetchData()
    },
    close() {
      this.$emit('update:visible', false)
    },
    hanldeAfterClose() {
      this.$emit('update:searchList', clonedeep(this.searchListClone))
      Object.assign(this.$data, this.$options.data.call(this), {
        stateList: this.stateList,
      })
      // 重置数据
      this.$refs.search.reset()
    },
    handlepageChange(e) {
      this.params.pageIndex = e
      this.fetchData()
    },
    fetchData() {
      this.spinning = true
      this.loadData(this.params, this.strContent)
        .then((res) => {
          const { data, count } = res
          this.houseList = data
          this.total = count
          this.$nextTick(() => {
            this.$refs.backTop.scrollToTop()
          })
        })
        .finally(() => {
          this.spinning = false
        })
    },
    refresh() {
      this.params.pageIndex = 1
      this.fetchData()
    },
    handleSearch(e, refresh) {
      this.strContent = e
      if (refresh) {
        this.$emit('update:searchList', clonedeep(this.searchListClone))
      }
      this.refresh()
    },
    handleHouseClick(house) {
      this.$emit('houseClick', house)
    },
  },
}
</script>
<style lang="less" scoped>
.card-wrapper {
  /deep/ .ant-modal-body {
    background-color: #f0f2f5 !important;
  }
}
/deep/ .house {
  border-style: none;
  border-color: unset;
  border-radius: 5px;
  font-size: 14px;
  line-height: 20px;
  padding: 16px;
  position: relative;
  .ant-descriptions-item-label,
  .ant-descriptions-item-content {
    color: #fff;
  }
}
</style>
